<template>
  <div class="ioe-swiper h-526 ">
    <van-swipe ref="swipe" class="h-526" :autoplay="3000" :show-indicators="true" @change="onChange" lazy-render>
      <van-swipe-item v-for="(item,index) in bannerList" :key="index + language" class="w-full h-496">
        <img :src="item.image" alt="" title="" @click="toPath(item.url)" class="h-496 border w-full rounded-2xl" />
        
        <!-- <div class="w-full h-420 absolute top-1 flex flex-col text-white"
             :class="item.subTitle ? 'pl-60' : 'items-center'">
          <template v-if="$i18n.locale === 'CN' || $i18n.locale === 'zh-CN'">
            <p :class="item.subTitle ? 'font-60 mt-124 mb-16' : 'font-48  mt-140 mb-54'">{{item.title}}</p>
          </template>
          <template v-else>
            <p :class="item.subTitle ? 'font-45 mt-124 mb-16' : 'font-48  mt-140 mb-54'">{{item.title}}</p>
          </template>
          <p v-show="item.subTitle" class="font-25 mb-50">{{item.subTitle}}</p>
          <p class="font-35 btn w-222 h-65 btnMain flex justify-center items-center">{{item.btnText}}</p>
        </div> -->
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator relative line w-724 h-6 border-ra-20 flex" style="background: #EDEEF0">
          <div v-for="(item,index) in bannerList.length" :key="index" class="flex-1 top-0 left-0 h-6 border-ra-20" :class="index == current?'bg-black':''">{{ current + 1 }}</div>
        </div>
      </template>
            
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import { mapGetters } from 'vuex';
import Axios from "@/API/userCenter.js";
export default {
    name: 'IndexSwiper',
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem
    },
    props: {
      keyNum: {
        type: Number,
        default: 1
      },
      type: {
        type: String,
        default: 'home'
      }
    },
    data(){
      return{
        current:0,
        bannerList:[],
        timer:null
      }
    },
    computed: {
      ...mapGetters('language', ['language']),
      imgList () {
        return this.type === 'home' ? [
          { id: 1, img: 'swiper_item', title: this.$t('參與挖礦贏大獎'), subTitle: this.$t('加入我們，收益超乎你的想像！'), btnText: this.$t('立即加入')},
          { id: 2, img: 'swiper_item', title: this.$t('收益更簡單，免費領空投！'), subTitle: '', btnText: this.$t('立即加入')},
          // { id: 3, img: 'swiper_item', title: this.$t('收益更簡單，免費領空投！'), subTitle: '', btnText: this.$t('立即加入') }
        ] : [
           { id: 3, img: 'swiper_item'},
        ]
      },
      language(){
        this.getBanner();
        return this.$i18n.locale;
      }
    },
    mounted(){
      this.getBanner();
    },
    activated() {
      this.getBanner()
      this.timer = setTimeout(() => {
        this.$refs.swipe.resize()
      }, 300);
    },
    deactivated(){
      clearTimeout(this.timer)
    },
    methods:{
      toPath(url) {
        if (url) {
          this.$router.push(url)
        }
      },
      onChange(index) {
        this.current = index;
      },
      getBanner(){
        let language
        if (this.$i18n.locale === 'en-US') {
          language = 'en'
        } else if (this.$i18n.locale.indexOf('CN') >= 0) {
          language = 'CN'
        } else {
          language = this.$i18n.locale
        }
        Axios.getBanner({
          model:'top',
          language
        }).then((res) => {
          this.bannerList = res.data
        }).catch((error) => {
          if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}     
          else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}    
        });
      }
    },
}
</script>
<style lang="scss" scoped>
.ioe-swiper{
  box-sizing: border-box;
}
.btn {
  border-radius: 55px;
}
.bannerimg{
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 0px;
  height: 8px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
